<template>
  <a-drawer
    destroy-on-close
    title="报文信息"
    placement="right"
    :closable="true"
    :visible="drawerVisible"
    :mask="false"
    width="100%"
    class="snapshot-drawer"
    :class="{'snapshot-drawer-w':drawerOverClass}"
    :get-container="getContainer"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    报文
    <!-- <p>{{ currentItem }}</p> -->
  </a-drawer>
</template>

<script>

export default {
  components: {

  },
  props: {
    currentItem: {
      type: Object,
      default: () => {}
    },
    drawerOverClass: {
      type: Boolean,
      default: false
    },
    drawerVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // drawer的容器
    getContainer() {
      return document.querySelector('.snapshot-vxe-table .vxe-table--body-wrapper');
    },
    // 当drawer关闭后
    afterVisibleChange(visible) {
      this.$emit('update:drawerOverClass', visible);
    },
    // 当drawer点击关闭
    onClose() {
      this.$emit('update:drawerVisible', false);
    }
  }
};
</script>

<style>

</style>
